Plex.Lib.CSS.load('UI.Widget.Fly_Box');

Plex.UI.Widget.Fly_Box = function(settings)
{
	var self = this;
	
	this.settings = {
		width:600,
		height:600,
		springOffset:75,
		shadeOpacity:0.75,
		moveEffect:true,
		fadeEffect:true
	}
	
	for(i in settings)
	self.setting[i]=settings[i];
	
	this.hotKeys = {
		27 : function(){
			self.close();
		}
	}
	
	this.init = function()
	{
		self.contentDiv.fx = new Fx.Styles(self.contentDiv, {
			duration: 250,
			wait: false,
			transition: Fx.Transitions.Quad.easeOut
		});
		
		self.colorShade.fx = new Fx.Styles(self.colorShade, {
			duration: 250,
			wait: false,
			transition: Fx.Transitions.Quad.easeOut
		});
		
		document.body.adopt([self.contentDiv,self.colorShade]);
	}
	
	this.contentDiv = new Element('div',{
		'class':'Fly_Box',
		styles: {
			'opacity':0
		}
	})
	
	this.colorShade = new Element('div',{
		'class': 'Fly_Box_Color_Shade',
		'styles': {
			'opacity':0,
			'position':'absolute'
		}
	})
	
	this.loadElement= function(element)
	{
		self.contentDiv.empty();
		element.injectInside(self.contentDiv);

		if(element.style.display=='none')
		element.style.display='';
		
		var width = element.offsetWidth;
		var height = element.offsetHeight;
		
		self.open(width,height);
	}
	
	this.open = function(width,height)
	{		
		this.settings.lastOnKeyPress = document.body.onkeypress;
		document.body.onkeypress = self.runHotKeys;
		
		self.colorShade.style.zIndex = Plex.UI.zIndex++;
		self.contentDiv.style.zIndex = Plex.UI.zIndex++;
		
//		console.log(width);
//		console.log(height);
		
		
//		if(width)
//		{
//			self.settings.lastWidth = width;
//			self.settings.lastHeight = height;
//		}
//		else
//		{
//			width = self.settings.lastWidth;
//			height = self.settings.lastHeight;
//		}
		
		
		self.contentDiv.set({
			'styles':{
				'width': width,
				'height': height+40,
			}
		})
		
		self.settings.leftMargin = -(width/2);
		self.settings.topMargin = -(height/2);
		
		if(self.settings.moveEffect && self.settings.fadeEffect)
		{
			self.contentDiv.fx.start({
				'opacity':1,
				'margin-top': [self.settings.topMargin-self.settings.springOffset,self.settings.topMargin],
				'margin-left': [self.settings.leftMargin-self.settings.springOffset,self.settings.leftMargin]
			});
			
			
			self.colorShade.fx.start({
				'opacity':self.settings.shadeOpacity
			})
		}
		else if(self.settings.moveEffect)
		{
			self.contentDiv.set({
				'styles':{				
					'opacity':1
				}
			});
			self.contentDiv.fx.start({
				'margin-top': [self.settings.topMargin-self.settings.springOffset,self.settings.topMargin],
				'margin-left': [self.settings.leftMargin-self.settings.springOffset,self.settings.leftMargin]
			})
			
			self.colorShade.set({
				style:{
					'opacity':self.settings.shadeOpacity
				}
			})
		}
		else if(self.settings.fadeEffect)
		{
			self.contentDiv.set({
				'styles':{
					'margin-top': self.settings.topMargin,
					'margin-left': self.settings.leftMargin
				}
			});
			
			self.contentDiv.fx.start({
				'opacity':1				
			})
			
			
			self.colorShade.fx.start({
				'opacity':self.settings.shadeOpacity
			})
		}
		else
		{
			self.contentDiv.set({
				'styles':{
					'margin-top': self.settings.topMargin,
					'margin-left': self.settings.leftMargin,
					'opacity':1
				}
			});
			
			self.colorShade.set({
				style:{
					'opacity':self.settings.shadeOpacity
				}
			})
		}	
	}
	
	this.runHotKeys = function(e)
	{
		
		if(self.hotKeys[e.keyCode])
		{
			self.hotKeys[e.keyCode].apply(self);
		}
		else if(self.hotKeys[String.fromCharCode(e.charCode)])
		{
			self.hotKeys[String.fromCharCode(e.charCode)].apply(self);
		}
		
		e.stopPropagation();
	}
	
	this.close = function(onClose)
	{	
		
		document.body.onkeypress = this.settings.lastOnKeyPress;
		document.onkeyPress = function(){}	
				
		var runAfter = function(){
			if(onClose)
			onClose();
		}		
				
		if(self.settings.moveEffect && self.settings.fadeEffect)
		{
			self.contentDiv.fx.start({
				'opacity':0,
				'margin-top': self.settings.topMargin-self.settings.springOffset,
				'margin-left': self.settings.leftMargin-self.settings.springOffset,
			}).chain(runAfter)
			
			
			self.colorShade.fx.start({
				'opacity':0
			})
		}
		else if(self.settings.moveEffect)
		{
			self.contentDiv.fx.start({
				'margin-top': self.settings.topMargin-self.settings.springOffset,
				'margin-left': self.settings.leftMargin-self.settings.springOffset,
			}).chain(runAfter)
			
			self.colorShade.set({
				'styles':{
					'opacity':0
				}
			})
		}
		else if(self.settings.fadeEffect)
		{
			self.contentDiv.fx.start({
				'opacity':0,
			}).chain(runAfter)
			
			
			self.colorShade.fx.start({
				'opacity':0
			})
		}
		else 
		{
			self.contentDiv.set(
			{
				'styles':{
					'opacity':0,
				}
			})
			
			self.colorShade.set({
				'styles':{
					'opacity':0
				}
			})
			
			
			runAfter();
		}	
	}
	
	this.loadURL = function(URL){
		self.contentDiv.empty();
		
		iFrame = new Element('iframe',{
			'src':URL,
			'frameborder':0,
			'styles': {
				'width': '100%',
				'height': '100%',
			}
		}).injectInside(self.contentDiv);
	}
	
	this.loadImage = function(src){
		self.contentDiv.empty();
		var preLoader = new Image();
		
		
		preLoader.onload=function(){
			var image = new Element('img',{
				'src':src,
				'border':0,
				'styles': {
					'width': preLoader.width,
					'height': preLoader.height,
				}
			}).injectInside(self.contentDiv);

			self.resizeBox(preLoader.width,preLoader.height);
			preLoader.onload=function(){};
		}
		
		preLoader.src = src;
	}
	
	this.init();
}